<template>
  <div class="about-container">
    <el-card>
      <template #header>
        <div class="about-header">
          <h1>关于效率工具平台</h1>
        </div>
      </template>
      
      <div class="about-content">
        <h2>平台简介</h2>
        <p>效率工具平台是一个基于微前端架构的企业级应用系统，旨在提供一站式的办公和数据处理解决方案。平台采用了最新的前端技术栈，包括Vue 3、Vite、Pinia和Qiankun等，实现了高效、灵活和可扩展的前端架构。</p>
        
        <h2>技术架构</h2>
        <div class="tech-stack">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="前端框架">
              Vue 3 + Composition API
            </el-descriptions-item>
            <el-descriptions-item label="构建工具">
              Vite 4
            </el-descriptions-item>
            <el-descriptions-item label="状态管理">
              Pinia
            </el-descriptions-item>
            <el-descriptions-item label="微前端框架">
              Qiankun
            </el-descriptions-item>
            <el-descriptions-item label="UI组件库">
              Element Plus
            </el-descriptions-item>
            <el-descriptions-item label="包管理工具">
              PNPM + Monorepo
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <h2>微应用列表</h2>
        <el-table :data="appList" style="width: 100%">
          <el-table-column prop="name" label="应用名称" />
          <el-table-column prop="description" label="功能描述" />
          <el-table-column prop="version" label="版本" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '已上线' ? 'success' : 'info'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <h2>版本信息</h2>
        <el-timeline>
          <el-timeline-item timestamp="2023/7/1" placement="top" type="primary">
            <el-card>
              <h4>v1.0.0</h4>
              <p>初始版本发布</p>
              <ul>
                <li>完成基座应用和核心功能开发</li>
                <li>集成微前端架构</li>
                <li>实现两个子应用的接入</li>
              </ul>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2023/6/15" placement="top">
            <el-card>
              <h4>v0.9.0 Beta</h4>
              <p>内部测试版本</p>
              <ul>
                <li>完成基础架构搭建</li>
                <li>实现用户认证与权限管理</li>
              </ul>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2023/6/1" placement="top">
            <el-card>
              <h4>v0.5.0 Alpha</h4>
              <p>技术预览版</p>
              <ul>
                <li>完成技术选型</li>
                <li>搭建开发环境</li>
                <li>制定开发规范</li>
              </ul>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const appList = ref([
  {
    name: '全域管理',
    description: '提供基础的数据管理功能',
    version: '1.0.0',
    status: '已上线'
  },
  {
    name: '应用二',
    description: '提供高级数据分析功能',
    version: '1.0.0',
    status: '已上线'
  },
  {
    name: '应用三',
    description: '提供自动化工作流功能',
    version: '0.9.0',
    status: '开发中'
  }
])
</script>

<style scoped>
.about-container {
  padding: 20px;
}

.about-header {
  text-align: center;
}

.about-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.about-content {
  padding: 20px 0;
}

.about-content h2 {
  margin: 25px 0 15px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 10px;
}

.about-content p {
  line-height: 1.8;
  color: var(--text-color-secondary);
  margin-bottom: 20px;
}

.tech-stack {
  margin-bottom: 30px;
}

.about-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.about-content li {
  line-height: 1.8;
}
</style> 